<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<style>
    form div{
        margin: 10px;
        border: solid 1px beige;
    }
</style>
<div id="app">
    <form>
        <div>
            <span>姓名:</span>
            <span><input type="text" v-model="uname"></span>
        </div>
        <div>
            <span>性别:</span>
            <span>
                <input type="radio" id="male" value="1" v-model="gender">
                <label for="male">男</label>
                <input type="radio" id="female" value="2" v-model="gender">
                <label for="female">女</label>
            </span>
        </div>
        <div>
            <span>爱好</span>
            <input type="checkbox" id="ball" value="1" v-model="hobby">
            <label for="ball">篮球</label>
            <input type="checkbox" id="sing" value="2" v-model="hobby">
            <label for="sing">篮球</label>
            <input type="checkbox" id="code" value="3" v-model="hobby">
            <label for="code">写代码</label>
        </div>
        <div>
            <span>职业:</span>
            <select v-model="job">
                <option value="0">-请选择职业-</option>
                <option value="1">教师</option>
                <option value="2">医生</option>
                <option value="3">码农</option>
            </select>
        </div>
        <div>
            <span>特长:</span>
            <select v-model="specialty" multiple="true" style="min-height:150px;">
                <option value="0">-请选择特长-</option>
                <option value="1">足球</option>
                <option value="2">唱歌</option>
                <option value="3">写代码</option>
                <option value="4">游泳</option>
            </select>
        </div>
        <div>
            <span>简介:</span>
            <textarea v-model="desc"></textarea>
        </div>
        <input type="submit" @click.prevent="submit">
    </form>

</div>
<script type="text/javascript">
var app=new Vue({
    el:"#app",
    data:{
        uname:'hk',
        gender:1,
        hobby:['2'],
        job:3,
        specialty:[1,3],
        desc:'简介',

    },
    methods:{
        submit:function(){
            console.log(this.uname,this.hobby.toString());
            console.log(this.job);
            console.log(this.specialty);
            console.log(this.desc);

        }
    }
})
</script>

</body>
</html>